import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import type {RouteRecordRaw} from 'vue-router'

// 扩展 RouteMeta 接口，因为 Vue-Router 的配置路由对象的 meata 属性有限，所以需要扩展
declare module 'vue-router' {
  interface RouteMeta {
    title?: string; // 菜单标题
    icon?: string; // 图标
    linkTo?: string; // 外链地址
    cache?: boolean; // 是否缓存：true 缓存，false 不缓存，会将 name 值用于 <keep-alive> 的 includes 上
    hidden?: boolean; // 是否在菜单中显示：true 显示，false 不显示
    isBreadcrumb?: boolean; // 是否显示到面包屑，默认或 true 会显示，false 不显示
  }
}

// 路由配置数组（单独抽取，后面会后端动态加载）
export const dynamicRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Layout',
    component: () => import('@/layout/index.vue'),
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home/index.vue'),
        meta: {
          title: '首页',
          icon: 'ele-HomeFilled',
          cache: false,
          hidden: false
        }
      },
      {
        path: '/system',
        name: 'System',
        redirect: '/system/menu',
        meta: {
          title: '系统管理',
          icon: 'ele-Setting'
        },
        children: [
          {
            path: '/system/menu',
            name: 'SystemMenu',
            component: () => import('@/views/system/menu/index.vue'),
            meta: {
              title: '菜单管理',
              icon: 'ele-Menu',
              cache: true,
              hidden: false
            }
          },
          {
            path: '/system/role',
            name: 'SystemRole',
            component: () => import('@/views/system/role/index.vue'),
            meta: {
              title: '角色管理',
              icon: 'ele-IceCream',
              cache: true,
              hidden: false
            }
          },
          {
            path: '/system/user',
            name: 'SystemUser',
            component: () => import('@/views/system/user/index.vue'),
            meta: {
              title: '用户管理',
              icon: 'ele-User',
              cache: true,
              hidden: false
            }
          },
        ]
      },
      {
        path: '/goods',
        name: 'Goods',
        redirect: '/goods/list',
        meta: {
          title: '商品管理',
          icon: 'ele-Goods',
          cache: true,
          hidden: false
        },
        children: [
          {
            path: '/goods/list',
            name: 'GoodsList',
            component: () => import('@/views/goods/list.vue'),
            meta: {
              title: '商品列表',
              icon: 'ele-GoodsFilled',
              cache: true,
              hidden: false
            }
          },
          {
            path: '/goods/category',
            name: 'GoodsCategory',
            component: () => import('@/views/goods/category.vue'),
            meta: {
              title: '商品分类',
              icon: 'ele-Operation',
              cache: true,
              hidden: false
            }
          },
        ]
      },
      {
        path: '/mengxuegu',
        name: 'Mengxuegu',
        component: () => import('@/views/link/index.vue'),
        meta: {
          title: '梦学谷官网',
          icon: 'ele-Link',
          cache: false,
          hidden: false,
          linkTo: 'https://www.mengxuegu.com'
        }
      },
      {
        path: '/401',
        name: 'NoPermission',
        component: () => import('@/views/error/401.vue'),
        meta: {
          title: '401页面',
          icon: 'ele-Warning',
          cache: true,
          hidden: false
        }
      },
      {
        path: '/404',
        name: 'NotFound',
        component: () => import('@/views/error/404.vue'),
        meta: {
          title: '401页面',
          icon: 'ele-Warning',
          cache: true,
          hidden: false
        }
      },
    ]
  }
]

// 默认路由配置
export const defaultRoutes: RouteRecordRaw[] = [
  {
    path: '/401',
    name: 'NoPermission',
    component: () => import('@/views/error/401.vue'),
    meta: {
      title: '401页面',
      icon: 'ele-Warning',
      hidden: false
    }
  },
  {
    path: '/:path(.*)*',
    name:'NotFound',
    component: () => import('@/views/error/404.vue'),
    meta: {
      title: '未找到此页面',
      hidden: true
    } 
  }
]

/* 
 * 全屏显示路由，不作用到 layout 布局渲染出口
 * （后端路由控制：后端配置菜单数据中不需要下面的菜单项）
 */
export const fullscreenRoutes:RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/auth/login.vue'),
    meta: {
      title: '登录',
      hidden: true
    }
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // routes: dynamicRoutes
  // 合并路由配置
  routes: [...fullscreenRoutes, ...defaultRoutes]
})

export default router
